<template>
<div class="row">
  <div class="col-md-12">
    <my-navbar>
      <template slot="left"> 
        <connect-server 
          @ev-connected="onConnected" 
          @ev-disconnected="onDisconnected"></connect-server>
      </template>
      <template slot="right">  
        <div v-if="connect">
          <div class="form-group">
            <label class="control-label">LCD</label>
            <select class="form-control" v-model="topoIdOfLcd" @change.prevent="onLcdChange">
              <option v-for="option in lcdOptions" :value="option.value">{{option.text}}</option>
            </select>
          </div> 
          <div class="form-group">
            <label class="control-label">{{$t("webapp.toolview")}}</label>
            <select class="form-control" v-model="toolview">
              <option v-for="option in toolViewOptions" :value="option.value">{{option.text}}</option>
            </select>
          </div>
          <button class="btn btn-default" @click.prevent="onSave2Server">
            {{ $t("webapp.save2server") }}
          </button>           
        </div>       
      </template> 
    </my-navbar>
  </div>
  <lcdwall-area :multi-screen="multiScreen" :toolview="toolview" v-if="connect"></lcdwall-area>
</div>
</template>

<script>
import _ from 'lodash'
import async from 'async'
import ebus from 'libs/ebus.js'
import locales from './locales.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import {mediaPhyApi, storageApi} from 'share/server/api.js'
import store from 'share/server/vuex/store.js'
import {getMultiScreenOfLcd} from 'share/server/utils.js'
import {devsOfLcd} from 'share/server/vuex/getters.js'
import {setLcdTopoDev} from 'share/server/vuex/actions/multimedia.js'
import LcdwallArea from './LcdwallArea.vue'
import ConnectServer from 'share/server/components/ConnectServer.vue'

export default {
  locales,
  store,
  vuex: {
    getters: {
      devsOfLcd,
      lcdTopoDev: (state) => state.lcd.topoDev
    },
    actions: {
      setLcdTopoDev
    }
  },
  components: {
    'lcdwall-area': LcdwallArea,
    'connect-server': ConnectServer
  },
  data () {
    return {
      connect: false,
      multiScreen: {
        x: 1,
        y: 1
      },
      toolview: 'modes',
      toolViewOptions: [{
        value: 'modes',
        text: this.$t('toolview.modes')
      }, {
        value: 'areas',
        text: this.$t('toolview.areas')
      }]
    }
  },
  computed: {
    lcdOptions () {
      let devsOfLcdwall = _.filter(this.devsOfLcd, (item) => {
        return item.devModel.includes('lcdwall')
      })
      return _.map(devsOfLcdwall, (item) => {
        return {
          text: item.devName,
          value: item.topoId
        }
      })      
    },
    topoIdOfLcd: {
      get () {
        return this.lcdTopoDev.topoId
      },
      set (val) {
        let topoDev = _.find(this.devsOfLcd, {topoId: val})
        this.setLcdTopoDev(topoDev)
      }
    }   
  },
  methods: {
    onSave2Server () {
      ebus.emit('on-save-to-server')
    },
    onLcdChange () {
      let multiScreen = getMultiScreenOfLcd(this.lcdTopoDev.devModel)
      this.multiScreen.x = multiScreen.x
      this.multiScreen.y = multiScreen.y
      mediaPhyApi.setDevId(this.topoIdOfLcd)
      mediaPhyApi.sendCmd('getModes').then(function(res) {
        if (res && res.data && res.data.code === 0) {
          this.toolview = 'modes'
          var modes = []
          if (res.data.data.modes) {
            modes = res.data.data.modes
          }
          ebus.emit('draw-preview', modes)
        } else {
          toast.code(this, res.data)
          //test
          //ebus.emit('draw-preview', [])
        }          
      }.bind(this))
    },
    onDisconnected () {
      this.setLcdTopoDev({
        topoId: -1
      })
      this.connect = false
    },
    onConnected () {
      this.connect = true
    },
  }
}
</script>

<style>
</style>